import { useEffect, useState } from "react";

import styLess from "./insurancePro.module.less"
import * as echarts from "echarts/core";
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart, PieChart } from "echarts/charts";
import { UniversalTransition, LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import Item from "antd/lib/list/Item";

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout,
]);


const InsurancePro = ({ address }) => {
  const [active, setActive] = useState(-1);
  const [list, setList] = useState([]);
  useEffect(() => {
    console.log("当前激活的是第", active);
  }, [active])

  useEffect(() => {
    setActive(-1);
    switch (address) {
      case "中国": setList(testData); break;
      case "广东省": setList(test1Data); break;
      default: setList(test2Data);
    }
  }, [address])

  const testData = [

    {
      unitName: '广分',
      type: '台风-14级',
      date: '2023-12-12',
    },
    {
      unitName: '浙分',
      type: '台风-13级',
      date: '2023-12-12',
    },
    {
      unitName: '深圳',
      type: '台风-12级',
      date: '2023-12-12',
    },
    {
      unitName: '湖南',
      type: '台风-112级',
      date: '2023-12-12',
    },
  ]
  const test1Data = [

    {
      unitName: '湖南',
      type: '台风-5级',
      date: '2023-12-12',
    },
    {
      unitName: '深圳',
      type: '台风-4级',
      date: '2023-12-12',
    },

  ]
  const test2Data = [
    {
      unitName: '浙分',
      type: '台风-2级',
      date: '2023-12-12',
    },
    {
      unitName: '广分',
      type: '台风-1级',
      date: '2023-12-12',
    },
  ]


  return (
    <div className={styLess.box}>
      <div className="InsuranceProbar">
        <div className="box" >
        <div className="list head" >
            <div className="item head-item" >
              <div className="item-brief">
                <div className="item-box" >
                  <div className="col" >机构地区</div>
                </div>
                <div className="item-box" >
                  <div className="col" >事件类型</div>
                </div>
                <div className="item-box" >
                  <div className="col" >开始时间</div>
                </div>
              </div>
            </div>
          </div>
          <div className="list tabody">
            {
              list.map((data, index) => {
                return <>

                  <div className="item" key={index}>
                    <div className="item-brief">
                      <div className="item-box" onClick={() => {
                        // setActive(index)
                        if (active === index) {
                          setActive(null);
                        } else {
                          setActive(index)
                        }
                      }} >
                        <div className="col" >{data.unitName}</div>
                      </div>
                      <div className="item-box" >
                        <div className="col" >{data.type}</div>
                      </div>
                      <div className="item-box" >
                        <div className="col" >{data.date}</div>
                      </div>
                    </div>
                    <div className={active === index ? 'item-detail active' : 'item-detail'}>
                      <div>机构：{data.unitName}</div>
                      <div>事件：{data.type}</div>
                      <div>时间：2022/12/12-2023/12/12</div>
                      <div>受灾客户量：123</div>
                      <div>保额：￥123443.44</div>
                    </div>

                  </div>

                </>
              })
            }

          </div>
        </div>
      </div>
    </div>
  );
};

export default InsurancePro;
